<!--
 * @Description: 用户开票管理
 * @Author: py
 * @Date: 2024-12-23
-->
<script setup lang="ts" name="invoice-list">
import type { PlusColumn } from 'plus-pro-components'
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { orderListApi } from '@fl/api/city-service'
import { SearchTable } from '@fl/components'
import { useRouter } from 'vue-router'

import { useDicts } from './hooks/use-dicts'

const { getDictLabel, getDictOptions } = useDicts()

const equipSuppliers = getDictOptions('oEquipSupplier')
const invoiceStatusOptions = getDictOptions('oInvoiceStatus')
const invoiceTypes = getDictOptions('oInvoiceType')

const router = useRouter()

const initialState = {
    equipSupplier: '',
    invoiceDate: [],
    invoiceType: '',
    orderCode: '',
    settleState: '',
}

const queryForm = ref({
    ...initialState,
})

const queryColumns: PlusColumn[] = [
    {
        colProps: {
            span: 7,
        },
        fieldProps: {
            placeholder: '请输入',
        },
        label: '申请手机号/邮箱',
        labelWidth: 120,
        prop: 'orderCode',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 6,
        },
        fieldProps: {
            placeholder: '请选择',
        },
        label: '发票类型',
        labelWidth: 75,
        options: invoiceTypes.value,
        prop: 'invoiceType',
        valueType: 'select',
    },
    {
        colProps: {
            span: 6,
        },
        fieldProps: {
            placeholder: '请选择',
        },
        label: '合作商名称',
        labelWidth: 90,
        options: equipSuppliers.value,
        prop: 'equipSupplier',
        valueType: 'select',
    },
    {
        colProps: {
            span: 5,
        },
        fieldProps: {
            placeholder: '请选择',
        },
        label: '开票状态',
        labelWidth: 75,
        options: invoiceStatusOptions.value,
        prop: 'settleState',
        valueType: 'select',
    },
    {
        colProps: {
            span: 7,
        },
        fieldProps: {
            endPlaceholder: '结束日期',
            format: 'YYYY-MM-DD',
            startPlaceholder: '开始日期',
            type: 'daterange',
            valueFormat: 'YYYY-MM-DD',
        },
        label: '开票时间',
        labelWidth: 120,
        prop: 'invoiceDate',
        valueType: 'date-picker',
    },
]

const stateMap = {
    1: 'tag-red',
    2: 'tag-blue',
    3: 'tag-green',
}
function formatPrice({ cellValue }) {
    return (!cellValue || Number.isNaN(cellValue)) ? '' : `¥ ${cellValue}`
}

const gridOptions = reactive<VxeGridProps>({
    align: 'left',
    border: 'none',
    columnConfig: {
        resizable: false,
    },
    columns: [
        { fixed: 'left', minWidth: 120, title: 'ID', type: 'seq' },
        { field: 'id', minWidth: 100, title: '司机申请ID' },
        { field: 'createTime', minWidth: 100, title: '申请日期' },
        { field: 'memberPhone', title: '申请手机号', width: 105 },
        { field: 'receiverName', minWidth: 150, title: '商户名称(合作商)' },
        { field: 'memberId', minWidth: 120, title: '发票类型' },
        { field: 'orderAddress', minWidth: 150, title: '发票抬头' },
        { field: 'orderCode', minWidth: 120, title: '税号' },
        { minWidth: 100, slots: { default: 'status' }, title: '发票状态' },
        { field: 'orderTotalAmount', formatter: formatPrice, minWidth: 120, title: '开票金额' },
        { fixed: 'right', slots: { default: 'operate' }, title: '操作', width: 80 },
    ],
    // headerCellClassName: 'table-header-cell',
    // headerRowClassName: 'bg-white',
    maxHeight: 370,
    rowConfig: {
        isHover: true,
        keyField: 'id',
    },
    showOverflow: false,
})

const tablePage = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const isLoading = ref(false)
const tableData = ref([])

function getList() {
    isLoading.value = true

    const oParams = {
        page: tablePage.value.currentPage,
        size: tablePage.value.pageSize,
        ...queryForm.value,
    }
    orderListApi(oParams).then((res) => {
        const { records, total } = res
        tablePage.value.total = total
        tableData.value = records.map((item, index) => {
            return {
                ...item,
                invoiceStatus: index > 0 && index < 4 ? index : 3,
            }
        })
    }).finally(() => {
        isLoading.value = false
    })
}
getList()

function handleSearch() {
    tablePage.value.currentPage = 1
    getList()
}
function handleReset() {
    queryForm.value = {
        ...initialState,
    }
    tablePage.value.currentPage = 1
    tablePage.value.pageSize = 10
    getList()
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
    getList()
}

function handleExport() {}

function toForm(oRaw, type) {
    router.push({
        name: 'invoice-form',
        query: {
            formType: type,
            id: oRaw.id,
        },
    })
}
</script>

<template>
    <ElCard shadow="never"
            class="mb-20 border-none"
    >
        <PlusForm v-model="queryForm"
                  :columns="queryColumns"
                  :row-props="{ gutter: 20 }"
                  label-position="right"
        >
            <template #footer>
                <div class="ml-auto">
                    <ElButton type="primary"
                              @click="handleSearch"
                    >
                        搜索
                    </ElButton>

                    <ElButton @click="handleReset">
                        重置
                    </ElButton>
                </div>
            </template>
        </PlusForm>
    </ElCard>

    <ElCard shadow="never"
            class="border-none"
    >
        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isLoading"
                     :data="tableData"
                     @page-change="handlePageChange"
        >
            <template #toolbar_buttons>
                <el-button type="primary"
                           class="mb-10"
                           @click="handleExport"
                >
                    <span class="i-pajamas:export mr-4" />

                    <span class="lh-16">导出</span>
                </el-button>
            </template>

            <template #status="{ row }">
                <span class="status-tag"
                      :class="stateMap[row.invoiceStatus]"
                >
                    {{ getDictLabel('oInvoiceStatus', row.invoiceStatus) }}
                </span>
            </template>

            <template #operate="{ row }">
                <div class="row-btns">
                    <span class="btn-operate"
                          @click="toForm(row, 'detail')"
                    >
                        查看
                    </span>
                </div>
            </template>
        </SearchTable>
    </ElCard>
</template>

<style lang="less" scoped>
@import '../custom.less';
</style>
